<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>vue 组件</title>
		<script src="lib/vue.js"></script>
	</head>
	<body>
		<div id="app-7">
			<ol>
				<todo-item v-for="item in arr" v-bind:todo="item"></todo-item>
			</ol>
		</div>
	</body>
	<script type="text/javascript">
		Vue.component('todo-item',{
			props:['todo'],
			template:'<li>{{todo.text}}</li>'
		});
		var app7=new Vue({
			el:"#app-7",
			data:{
				arr:[
				    {text:'one'},
				    {text:'two'},
				    {text:'three'},
				    {text:'four'}
				]
			}
		});
	</script>
</html>
